<script setup lang="ts">
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import { listMenu } from '@/api/system/menu'
import { propTypes } from '@/utils/propTypes'

interface MenuOptionsType {
  menuId: number | string
  menuName: string
  children: MenuOptionsType[] | undefined
}

const props = defineProps({
  info: propTypes.any.def(null),
  tables: propTypes.any.def(null),
})

const genInfoForm = ref()

const subColumns = ref<any>([])
const menuOptions = ref<Array<MenuOptionsType>>([])
const { proxy } = getCurrentInstance() as ComponentInternalInstance

const infoForm = computed(() => props.info)

const table = computed(() => props.tables)

// 表单校验
const rules = ref({
  tplCategory: [{ required: true, message: '请选择生成模板', trigger: 'blur' }],
  packageName: [{ required: true, message: '请输入生成包路径', trigger: 'blur' }],
  moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }],
  businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
  functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }],
})
function subSelectChange() {
  infoForm.value.subTableFkName = ''
}
function tplSelectChange(value: string) {
  if (value !== 'sub') {
    infoForm.value.subTableName = ''
    infoForm.value.subTableFkName = ''
  }
}
function setSubTableColumns(value: string) {
  table.value.forEach((item: any) => {
    const name = item.tableName
    if (value === name)
      subColumns.value = item.columns
  })
}

/** 查询菜单下拉树结构 */
async function getMenuTreeselect() {
  const res = await listMenu()
  res.data.forEach(m => m.menuId = m.menuId.toString())
  const data = proxy?.handleTree<MenuOptionsType>(res.data, 'menuId')
  if (data)
    menuOptions.value = data
}

watch(() => props.info.subTableName, (val) => {
  setSubTableColumns(val)
})

onMounted(() => {
  getMenuTreeselect()
})
</script>

<template>
  <a-form ref="genInfoForm" :model="infoForm" :rules="rules" :label-col="{ style: 'width:200px' }" label-width="150px">
    <a-row>
      <a-col :span="12">
        <a-form-item prop="tplCategory">
          <template #label>
            生成模板
          </template>
          <a-select v-model:value="infoForm.tplCategory" @change="tplSelectChange">
            <a-select-option label="单表（增删改查）" value="crud" />
            <a-select-option label="树表（增删改查）" value="tree" />
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="12">
        <a-form-item prop="packageName">
          <template #label>
            生成包路径
            <a-tooltip title="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <a-input v-model:value="infoForm.packageName" />
        </a-form-item>
      </a-col>

      <a-col :span="12">
        <a-form-item prop="moduleName">
          <template #label>
            生成模块名
            <a-tooltip title="可理解为子系统名，例如 system" placement="top">
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <a-input v-model:value="infoForm.moduleName" />
        </a-form-item>
      </a-col>

      <a-col :span="12">
        <a-form-item prop="businessName">
          <template #label>
            生成业务名
            <a-tooltip content="可理解为功能英文名，例如 user" placement="top">
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <a-input v-model:value="infoForm.businessName" />
        </a-form-item>
      </a-col>

      <a-col :span="12">
        <a-form-item prop="functionName">
          <template #label>
            生成功能名
            <a-tooltip content="用作类描述，例如 用户" placement="top">
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <a-input v-model:value="infoForm.functionName" />
        </a-form-item>
      </a-col>

      <a-col :span="12">
        <a-form-item>
          <template #label>
            上级菜单
            <a-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <a-tree-select
            v-model:value="infoForm.parentMenuId"
            :tree-data="menuOptions"
            :field-names="{ label: 'menuName', value: 'menuId', children: 'children' }"
            value-key="menuId"
            node-key="menuId"
            placeholder="选择上级菜单"
            check-strictly
            filterable
            clearable
            highlight-current
          />
        </a-form-item>
      </a-col>

      <a-col :span="12">
        <a-form-item prop="genType">
          <template #label>
            生成代码方式
            <a-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <a-radio-group v-model:value="infoForm.genType">
            <a-radio value="0">
              zip压缩包
            </a-radio>
            <a-radio value="1">
              自定义路径
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>

      <a-col v-if="infoForm.genType === '1'" :span="24">
        <a-form-item prop="genPath">
          <template #label>
            自定义路径
            <a-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <a-input v-model:value="infoForm.genPath" />
        </a-form-item>
      </a-col>
    </a-row>

    <template v-if="info.tplCategory === 'tree'">
      <h4 class="form-header">
        其他信息
      </h4>
      <a-row v-show="info.tplCategory === 'tree'">
        <a-col :span="12">
          <a-form-item>
            <template #label>
              树编码字段
              <a-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
                <QuestionCircleOutlined />
              </a-tooltip>
            </template>
            <a-select v-model:value="infoForm.treeCode" placeholder="请选择">
              <a-select-option
                v-for="(column, index) in info.columns"
                :key="index"
                :label="`${column.columnName}：${column.columnComment}`"
                :value="column.columnName"
              >
                {{ `${column.columnName}：${column.columnComment}` }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item>
            <template #label>
              树父编码字段
              <a-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
                <QuestionCircleOutlined />
              </a-tooltip>
            </template>
            <a-select v-model:value="infoForm.treeParentCode" placeholder="请选择">
              <a-select-option
                v-for="(column, index) in infoForm.columns"
                :key="index"
                :label="`${column.columnName}：${column.columnComment}`"
                :value="column.columnName"
              >
                {{ `${column.columnName}：${column.columnComment}` }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item>
            <template #label>
              树名称字段
              <a-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
                <QuestionCircleOutlined />
              </a-tooltip>
            </template>
            <a-select v-model:value="infoForm.treeName" placeholder="请选择">
              <a-select-option
                v-for="(column, index) in info.columns"
                :key="index"
                :label="`${column.columnName}：${column.columnComment}`"
                :value="column.columnName"
              >
                {{ `${column.columnName}：${column.columnComment}` }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </template>

    <template v-if="info.tplCategory === 'sub'">
      <h4 class="form-header">
        关联信息
      </h4>
      <a-row>
        <a-col :span="12">
          <a-form-item>
            <template #label>
              关联子表的表名
              <a-tooltip content="关联子表的表名， 如：sys_user" placement="top">
                <QuestionCircleOutlined />
              </a-tooltip>
            </template>
            <a-select v-model:value="infoForm.subTableName" placeholder="请选择" @change="subSelectChange">
              <a-select-option v-for="(t, index) in table" :key="index" :label="`${t.tableName}：${t.tableComment}`" :value="t.tableName" />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item>
            <template #label>
              子表关联的外键名
              <a-tooltip content="子表关联的外键名， 如：user_id" placement="top">
                <QuestionCircleOutlined />
              </a-tooltip>
            </template>
            <a-select v-model:value="infoForm.subTableFkName" placeholder="请选择">
              <a-select-option
                v-for="(column, index) in subColumns"
                :key="index"
                :label="`${column.columnName}：${column.columnComment}`"
                :value="column.columnName"
              >
                {{ `${column.columnName}:${column.columnComment}` }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </template>
  </a-form>
</template>
